1import { ChevronDown, Square, SquareDashed, SquareDot } from "lucide-react";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuTrigger,
7} from "@/ui/dropdown-menu";
8import { cn } from "@/util";
9import { CreateQuestionButton } from "./create-question-button";
10import type { QuestionsFilter, QuestionsSort } from "./questions-client";
11
12export function QuestionsHeader({
13  owner,
14  repo,
15  filter,
16  setFilter,
17  sort,
18  setSort,
19}: {
20  owner: string;
21  repo: string;
22  filter: QuestionsFilter;
23  setFilter: (filter: QuestionsFilter) => void;
24  sort: QuestionsSort;
25  setSort: (sort: QuestionsSort) => void;
26}) {
27  return (
28    <div className="flex flex-row w-full h-9 items-center border-b">
29      <FilterButton
30        icon={SquareDot}
31        label="Popular"
32        isActive={filter === "popular"}
33        onClick={() => setFilter("popular")}
34      />
35      <FilterButton
36        icon={SquareDashed}
37        label="Unanswered"
38        isActive={filter === "unanswered"}
39        onClick={() => setFilter("unanswered")}
40      />
41      <FilterButton
42        icon={Square}
43        label="All"
44        isActive={filter === "all"}
45        onClick={() => setFilter("all")}
46      />
47      <div className="ml-auto h-full flex flex-row">
48        <SortDropdown sort={sort} setSort={setSort} />
49        <CreateQuestionButton owner={owner} repo={repo} />
50      </div>
51    </div>
52  );
53}
54
55function FilterButton({
56  icon: Icon,
57  label,
58  isActive,
59  onClick,
60}: {
61  icon: React.ComponentType<{ className?: string }>;
62  label: string;
63  isActive: boolean;
64  onClick: () => void;
65}) {
66  return (
67    <button
68      type="button"
69      className={cn(
70        "flex flex-row items-center h-full border-border border-r px-2 hover:bg-sidebar",
71        isActive ? "bg-sidebar text-foreground" : "text-muted-foreground",
72      )}
73      onClick={onClick}
74    >
75      <Icon className="size-3 mr-1.5" />
76      <span className="text-xs">{label}</span>
77    </button>
78  );
79}
80
81const SORT_LABELS: Record<QuestionsSort, string> = {
82  "created-asc": "Created (asc.)",
83  "created-desc": "Created (desc.)",
84  "updated-asc": "Updated (asc.)",
85  "updated-desc": "Updated (desc.)",
86  "vote-asc": "Votes (asc.)",
87  "vote-desc": "Votes (desc.)",
88};
89
90function SortDropdown({
91  sort,
92  setSort,
93}: {
94  sort: QuestionsSort;
95  setSort: (sort: QuestionsSort) => void;
96}) {
97  return (
98    <DropdownMenu>
99      <DropdownMenuTrigger asChild>
100        <button
101          type="button"
102          className="flex flex-row h-full items-center border-border border-l px-2 text-xs text-muted-foreground min-w-32 w-32"
103        >
104          {SORT_LABELS[sort]}
105          <ChevronDown className="size-3 ml-auto" />
106        </button>
107      </DropdownMenuTrigger>
108      <DropdownMenuContent align="start" className="rounded-none min-w-32 p-0">
109        {Object.entries(SORT_LABELS).map(([value, label]) => (
110          <DropdownMenuItem
111            key={value}
112            onClick={() => setSort(value as QuestionsSort)}
113            className="rounded-none px-2 py-1.5 text-xs cursor-pointer"
114          >
115            {label}
116          </DropdownMenuItem>
117        ))}
118      </DropdownMenuContent>
119    </DropdownMenu>
120  );
121}
122